<template>
    <div>
        <el-dialog title="新增文件" :visible.sync="detailsVisible" width='450px' append-to-body v-dialogDrag :close-on-click-modal="false" >
            <div>
                <el-form ref="form" :model="rowdata" label-width="100px" class="personeditform" :rules="rules" status-icon>
                    <el-form-item label="一类" prop="typea">
                        <el-input v-model="rowdata.typea" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="二类" prop="typeb">
                        <el-input v-model="rowdata.typeb" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="文件所属" prop="filetype">
                        <el-input v-model="rowdata.filetype" style="width: 80%;" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="文件名称" prop="name">
                        <el-input v-model="rowdata.name" style="width: 80%;"></el-input>
                    </el-form-item>
                     <el-form-item label="文件时间" prop="time">
                        <el-date-picker v-model="rowdata.time" type="date" placeholder="" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="文件编号" prop="bianhao">
                        <el-input v-model="rowdata.bianhao" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="文件" prop="content">
                        <el-input placeholder="请选择文件" v-model="rowdata.content" :disabled="true">
                            <template slot="append">
                                <el-button type="primary" @click="clickfile">选择</el-button>
                                <input type="file" id="inputfile" style="display: none;" multiple ref="inputfile" @change="changefile">
                            </template>
                        </el-input>
                    </el-form-item>
                     <el-form-item label="实际存放" prop="store">
                        <el-input v-model="rowdata.store" style="width: 80%;"></el-input>
                    </el-form-item>
                </el-form>
                <el-row style="position: relative;width: 100%;margin-top: 10px;" v-if="Visible==true">
                     <div>
                        <el-progress   :percentage="percentage"  :show-tooltip="false" :show-input-controls="false"></el-progress>
                    </div>
                </el-row>
                <el-row style="position: relative;width: 100%;margin-top: 10px;">
                    <el-button :loading="disabled"  style="margin: 0 auto;display: block;"  :disabled="disabled" type="primary"  @click="checksubmit('form')">确定并保存<i class="el-icon-upload el-icon--right" ></i></el-button>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return { 
                detailsVisible: false, 
                needZk:false,
                rowdata: {
                    typea:'',
                    typeb:'',
                    filetype:'',
                    
                    name:'',
                    time:'',
                    bianhao:'',
                    content:'',
                    store:'',
                },
                disabled:false,

                //uploadfile
                file:'',
                percentage:0,
                truesrcs:[],
                Visible: false, 
                rules: {
                    name: [{ required: true, message: '不能为空', trigger: 'change' }],
                    time: [{ required: true, message: '不能为空', trigger: 'change' }],
                    bianhao: [{ required: true, message: '不能为空', trigger: 'change' }],
                    content: [{ required: true,message: '不能为空', trigger: 'change' }],
                    store: [{ required: true, message: '不能为空', trigger: 'change' }],
                },
                uploadToServeData:{},
            };
        },
        mounted() {
        },
        watch: {
            detailsVisible: function (n) {
                if (n == true) {
                    this.rowdata.name="";
                    this.rowdata.time="";
                    this.rowdata.bianhao="";
                    this.rowdata.content="";
                    this.rowdata.store="";
                }
            },
        },
        methods: {
            clickfile(){
                let _this=this;
                setTimeout(function(){
                    _this.$refs.inputfile.click();
                },50)
            },
            changefile(event){
                this.files=[];
                for (let index = 0; index < event.srcElement.files.length; index++) {
                    const element = event.srcElement.files[index];
                    this.files.push(element);
                    
                }
                if(this.files.length==1){
                    this.rowdata.content=this.files[0].name;
                }
                else if(this.files.length>1){
                    this.rowdata.content=this.files.length+"个文件";
                }
                var inputfile = document.getElementById('inputfile');
                inputfile.value = ''; 
            },
            uploadFile(file){
                this.Visible=true;
                this.$upload.set_options({
                    file:this.files,
                    action:Common.Config.url,
                    data:{
                        type:'uploadfile',
					    token:Common.GetStorage('token')
                    },
                    onProgress:this.onProgress,
                    onSuccess:this.onSuccess,
                    onError:this.onError,
                })
            },
            onProgress(value,index,length){
                this.percentage=value;




            },
            onSuccess(filename){
                this.Visible=false;
                console.log(filename);
                this.truesrcs=filename;
                this.uploadToServe();
            },
            onError(message){
                this.$message({
                    message:message,
                    type:'error'
                });
                this.Visible=false;
            },
            Save(){
                let _this=this;
                this.uploadToServeData={};
                this.uploadToServeData.typea=this.rowdata.typea;
                this.uploadToServeData.typeb=this.rowdata.typeb;
                this.uploadToServeData.filetype=this.rowdata.filetype;
                this.uploadToServeData.name=this.rowdata.name;
                this.uploadToServeData.time=this.rowdata.time;
                this.uploadToServeData.bianhao=this.rowdata.bianhao;
                this.uploadToServeData.store=this.rowdata.store;
                this.Visible=true;
                this.percentage=0;
                this.uploadFile(this.file);
            },
            checksubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.Save();
                    } 
                    else {
                        this.$message("请填写必要信息");
                        return false;
                    }
                });
            },
            async uploadToServe(){
                let _this=this;
                this.disabled=true;
                let hasfalse=false;
                for (let index = 0; index < _this.truesrcs.length; index++) {
                    const element =  _this.truesrcs[index];
                    this.uploadToServeData.truesrc=element;
                    let postdata={
                        type:"addfilerecodercommon",
                        split:JSON.stringify(this.uploadToServeData)
                    }
                    let ajaxp= this.$Common.AjaxPostSync(postdata,true);
                    if(ajaxp.Status==false){
                        hasfalse=true;
                        break;
                    }
                }
                _this.disabled=false;
                if(hasfalse==false){
                    _this.$message("新增成功");
                    _this.detailsVisible=false;
                    _this.$emit('editResult')
                }
                else{
                    _this.$message("上传文件时转换pdf失败,请尝试把Doc转成Docx或Xls转成Xlsx");
                }
            },

        },

    }
</script>
<style>
</style>